<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>重置</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div align="center">
    <font face="楷体" size="10">
        <b style="color: #66b1ff">重置密码页面</b>
    </font>
    <div align="center">
        <form action="/document/users/retrieve" method="post">
            <table>
                <tr>
                    <td>用户账号：</td>
                    <td>
                        <input name="userNumber" type="text" id="userNumber">
                        <div style="color: red"><div id="errorMsg" style="display: none">该账号未被注册或者格式错误，不能被重置密码（不能发送验证码）！</div></div>
                    </td>
                    <td>
                        <p style="color: red" th:text="${retrieveMessageNumber}" th:if="${not #strings.isEmpty(retrieveMessageNumber)}"></p>
                        <p style="color: red" th:text="${retrieveMessageNumberFormat}" th:if="${not #strings.isEmpty(retrieveMessageNumberFormat)}"></p>
<!--                        <p style="color: red" th:text="${messageNumberFormat02}" th:if="${not #strings.isEmpty(messageNumberFormat02)}"></p>-->
                    </td>
                </tr>
                <tr>
                    <td>新密码：</td>
                    <td>
                        <input name="newPassword" type="password" id="newPassword">
                    </td>
                    <td>
                        <p style="color: red" th:text="${retrieveMessagePassword}" th:if="${not #strings.isEmpty(retrieveMessagePassword)}"></p>
                    </td>
                </tr>
                <tr>
                    <td>确认新密码：</td>
                    <td>
                        <input name="surePassword" type="password" id="surePassword">
                    </td>
                </tr>
                <tr>
                    <td>
                        <p style="color: red" th:text="${retrieveMessageSure}" th:if="${not #strings.isEmpty(retrieveMessageSure)}"></p>
                    </td>
                </tr>
                <tr>
                    <td>请输入验证码：</td>
                    <td>
                        <input name="code" type="text" id="code"> <button type="button" id="but2">发送验证码</button>
                    </td>
                    <td>
                        <p style="color: red" th:text="${retrieveMessageCode}" th:if="${not #strings.isEmpty(retrieveMessageCode)}"></p>
                    </td>
                </tr>
            </table>
            <br>
            <div align="center">
                <input value="确认重置密码" type="submit" id="change">
            </div>
        </form>
        <br>
        <form action="/document/users/in" method="post">
            <input type="submit" value="返回首页">
        </form>
    </div>
</div>
</body>

<!-- 引入组件库 -->
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/plugins/elementui/index.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/axios-0.18.0.js}"></script>

<script>
    $("#but2").click(function(){
        var error = document.getElementById("errorMsg");
        error.style.display = "none";
        var userNumber = document.getElementById("userNumber").value;
        if($.isEmptyObject(userNumber)){
            alert("用户账号不能为空！")
        } else {
            alert("请稍等！正在准备给"+userNumber+"发送验证码~~~")
            axios.post("/document/users/send2/" + userNumber).then((res) => {
                if(res.data.flag){
                    error.style.display = "none";
                    alert("验证码正在给 " + userNumber + " 发送途中~~~，快到啦！")
                } else {
                    error.style.display = "";
                    alert(userNumber + res.data.message)
                }
            });
        }
    });
</script>
</html>